@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
    margin: 0px;
    padding: 0px;

    overflow: hidden;
}

.back {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;

    background-color: rgb(14, 18, 22);
    background-size: 100% 100%;
}

.logo {
    width: 400px;
    height: 400px;
    z-index: 100;
    left: 39.5%;
    top: 16%;
    position: absolute;
}

.servername {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 45px;

    color: rgb(255, 255, 255);

    position: relative;
    position: absolute;
    letter-spacing: 2px;
    z-index: 9999;

    left: 3;
    right: 0;
    top: 490px;
    text-shadow: 4px 3px 9px rgba(0,0,0,0.39);
}


.loadingtext {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 20px;

    color: rgba(255, 255, 255, 0.24);

    position: relative;
    position: absolute;
    letter-spacing: 2px;
    z-index: 9999;

    left: 3;
    right: 0;
    top: 650px;
    text-shadow: 4px 3px 9px rgba(0,0,0,0.39);
}

.loadingtext:after {
    content: ' .';
    animation: dots 2s steps(3, end) infinite;}
  
  @keyframes dots {
    0%, 20% {
      color: rgba(0,0,0,0);
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
      color: rgba(255, 255, 255, 0.24);
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
      text-shadow:
        .25em 0 0 rgba(255, 255, 255, 0.24),
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
      text-shadow:
        .25em 0 0 rgba(255, 255, 255, 0.24),
        .5em 0 0 rgba(255, 255, 255, 0.24);}
    }

.bottom
{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

#gradient
{
    position: absolute;
    bottom: 0px;
    width: 100%;

    height: 25%;

}

h1, h2 {
  position: relative;
  background: transparent;
  z-index: 0;
}
/* add a single stroke */
h1:before, h2:before {
  content: attr(title);
  position: absolute;
  -webkit-text-stroke: 0.1em #000;
  left: 0;
  z-index: -1;
}

.letni
{
    position: absolute;
    left: 0;
    right: 0;
    top: 170px;

    z-index: 5;

    color: #fff;

    
}

.letni p
{

    margin-left: 3px;

    margin-top: 0px;
}

.letni h2, .letni h3
{
    font-family: 'Ubuntu', sans-serif;

    text-transform: uppercase;

    margin: 0px;

    display: inline-block;
}

.top
{
    color: #fff;

    position: absolute;
    top: 7%;
    left: 5%;
    right: 5%;
    -webkit-box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
    -moz-box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
    box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
}

.top h1
{

    margin: 0px;
}

.top h2
{

    margin: 0px;

    color: rgb(209, 209, 209);
    border-radius: 5px;
}

.loadbar
{
    z-index: 99999999999999999;

    width: 50%;
    background-color: rgb(21, 28, 34);
    height: 3px;

    margin: 0 auto;
    position: absolute;

    margin-top: 550px;
    margin-bottom: 550px;
    right: 0;
    left: 0;

    overflow: hidden;

    position: relative;

    display: block;

    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.368);
}

.thingy
{
    width: 8%;
    background-color: rgb(0, 221, 255);
    height: 3px;

    position: absolute;
    left: 10%;
    -webkit-box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
    -moz-box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
    box-shadow: inset 200px 200px 300px 200px rgba(124, 124, 124, 0.082);
}